<template>
    <div class="uploaded-book-div">
        <!--搜索行-->
        <el-row class="search-row" type="flex" justify="end">
            <el-col :span="3">
                <el-button @click="batchDeleteUploadedBooks" v-if="selectedBookList.length > 0" type="danger" size="mini">批量删除</el-button>
            </el-col>
            <el-col :span="12"></el-col>
            <el-col :span="9">
                <el-input @keyup.enter.native="enterDown" placeholder="书名" v-model="searchParam" size="mini">
                    <el-button @click="onClickSearchButton" slot="append" icon="el-icon-search" size="mini"></el-button>
                </el-input>
            </el-col>
        </el-row>
        <!--表格栏-->
        <el-row type="flex" justify="center">
            <el-col :span="24">
                <el-table
                        :data="uploadedBookList"
                        style="width: 100%"
                        @selection-change="handleSelectionChange">
                    <el-table-column
                            align="center"
                            type="selection"
                            width="30">
                    </el-table-column>
                    <!--下拉详细信息-->
                    <!--<el-table-column
                            align="center"
                            type="expand">
                        <template slot-scope="props">
                            <el-form label-position="left" inline class="demo-table-expand">
                                <el-form-item label="书名">
                                    <span>{{ props.row.bookName}}</span>
                                </el-form-item>
                                <el-form-item label="作者">
                                    <span>{{ props.row.author }}</span>
                                </el-form-item>
                                <el-form-item label="简介">
                                    <span>{{ props.row.content }}</span>
                                </el-form-item>
                                <el-form-item label="标价">
                                    <span>{{ props.row.originalPrice}}</span>
                                </el-form-item>
                                <el-form-item label="现价">
                                    <span>{{ props.row.price }}</span>
                                </el-form-item>
                                <el-form-item label="库存">
                                    <span>{{ props.row.stock}}</span>
                                </el-form-item>
                                <el-form-item label="卖家的话">
                                    <span>{{ props.row.remark }}</span>
                                </el-form-item>
                            </el-form>
                        </template>
                    </el-table-column>-->
                    <el-table-column
                            align="center"
                            label="书名"
                            prop="bookName">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            label="当前库存"
                            prop="stock">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            label="发布时间"
                            prop="createTime">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            label="操作">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!--分页行-->
                <el-row class="pagination-row" type="flex" justify="center">
                    <el-col :span="20">
                        <el-pagination
                                layout="total, prev, pager, next"
                                @prev-click="onPrevClick"
                                @next-click="onNextClick"
                                @current-change="onCurrentChange"
                                :page-size="pageInfo.pageSize"
                                :current-page="pageInfo.currentPage"
                                :total="pageInfo.total">
                        </el-pagination>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import storage from '../../model/storage.js';
    export default {
        name: "UploadedBookPart",
        data(){
            return {
                searchParam: '',
                uploadedBookList:[
                ],
                selectedBookList:[],
                pageInfo: { currentPage: 1, total: 0, pageSize: 10}
            }
        },
        methods:{
            //编辑按钮触发事件
            handleEdit(index, row) {
                //console.log(index, row);
                this.$router.replace({name: 'editUploadedBook', params: {uploadedBook: row}});
            },
            //删除按钮触发事件
            handleDelete(index, row) {
                //console.log(index, JSON.stringify(row));
                //this.deleteUploadedBooks(row);
                this.$confirm('确定要删除吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteUploadedBooks(row);
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //批量删除已上传书籍
            batchDeleteUploadedBooks(){
                //this.deleteUploadedBooks(this.selectedBookList);
                this.$confirm('确定要删除选中的所有书籍吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteUploadedBooks(this.selectedBookList);
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            handleSelectionChange(val){
                this.selectedBookList = val;
            },
            //点击搜索按钮时触发
            onClickSearchButton(){
                this.getUploadedBookList(1, this.pageInfo.pageSize, this.searchParam === '' ? {userInfoId: this.$store.state.userInfo.userInfoId} : {bookName: this.searchParam, userInfoId: this.$store.state.userInfo.userInfoId});
            },
            //当搜索框失去焦点或按下回车键时触发
            enterDown(val){
                //console.log(val);
                this.getUploadedBookList(1, this.pageInfo.pageSize, this.searchParam === '' ? {userInfoId: this.$store.state.userInfo.userInfoId} : {bookName: this.searchParam, userInfoId: this.$store.state.userInfo.userInfoId});
            },
            //点击前一页时触发
            onPrevClick(){
                this.getUploadedBookList(this.pageInfo.currentPage - 1, this.pageInfo.pageSize, this.searchParam === '' ? {userInfoId: this.$store.state.userInfo.userInfoId} : {bookName: this.searchParam, userInfoId: this.$store.state.userInfo.userInfoId});
            },
            //点击下一页时触发
            onNextClick() {
                this.getUploadedBookList(this.pageInfo.currentPage + 1, this.pageInfo.pageSize, this.searchParam === '' ? {userInfoId: this.$store.state.userInfo.userInfoId} : {bookName: this.searchParam, userInfoId: this.$store.state.userInfo.userInfoId});
            },
            //当点击具体页数时触发
            onCurrentChange(val){
                this.getUploadedBookList(val, this.pageInfo.pageSize, this.searchParam === '' ? {userInfoId: this.$store.state.userInfo.userInfoId} : {bookName: this.searchParam, userInfoId: this.$store.state.userInfo.userInfoId});
            },
            getUploadedBookList(currentPage, pageSize, searchParam){
                this.$axios.post( '/manager/getUploadedBooksByPage',
                    {currentPage: currentPage, pageSize: pageSize, searchParam: searchParam})
                    .then(response => {
                        if(response.data.success){
                            //console.log(response.data.data);
                            this.pageInfo.currentPage = response.data.data.currentPage;
                            this.pageInfo.total = response.data.data.total;
                            this.uploadedBookList = response.data.data.records;
                        }else{
                            //若session过期则跳转到登陆页面
                            if (response.data.msg === 'sessionInvalid') {
                                sessionStorage.clear();
                                this.$store.commit('updateIsLogin', false);
                                this.$store.commit('updateUserInfo', null);
                                this.$router.push({name: 'login'});
                            }
                        }
                    }).catch(error => {
                        console.log(error);
                    });
            },
            deleteUploadedBooks(uploadedBooks){
                let param;
                //判断参数类型，若为数组则无需构造参数
                if(!(uploadedBooks instanceof Array)){
                    //若不是数组则需要构造成数组对象作为参数
                    param = [];
                    param.push(uploadedBooks);
                }else{
                    param = uploadedBooks;
                }
                this.$axios.post('/manager/deleteUploadedBooks',
                    param).then(response => {
                    if(response.data.success){
                        //console.log("删除书籍成功信息：" + response.data.data);
                        this.$message.info("删除成功");
                        this.getUploadedBookList(1, this.pageInfo.pageSize, this.searchParam === '' ? {userInfoId: this.$store.state.userInfo.userInfoId} : {bookName: this.searchParam, userInfoId: this.$store.state.userInfo.userInfoId});
                    }else{
                        console.log('删除书籍失败信息：' + response.data.msg);
                        if (response.data.msg === 'sessionInvalid') {
                            storage.isSessionValid(this);
                        }
                    }
                }).catch(error => {
                    console.log(error);
                }).finally(() => {

                });
            }
        },
        mounted() {
            //挂载页面时获取已上传书籍信息
            this.getUploadedBookList(1, 10, {userInfoId: this.$store.state.userInfo.userInfoId});
        }
    }
</script>

<style scoped>

    .search-row{
        margin: 10px 0;
    }

    .pagination-row{
        text-align: center;
        margin-top: 30px;
    }

    /*详细信息样式*/
    /*.demo-table-expand {
        font-size: 12px;
    }
    .demo-table-expand .el-form-item__label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }*/
</style>